<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>醋醋商城</title>
    <link rel="shortcut icon" href="/static/favicon.ico">
    <style type="text/css">
        * {
            margin: 0px;
        }

        body {
            background: url("../static/images/login_bg.jpg") center top no-repeat;
            background-size: 100%
        }

        .Lg_Main {
            width: 1000px;
            margin: 100px auto;
        }

        .Lg_Main .Login {
            width: 325px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0px 0px 5px #666;
            float: right;
            padding: 20px 50px;
        }

        .Lg_Main .Login h2 {
            line-height: 45px;
            font-size: 26px;
            font-family: "微软雅黑";
            font-weight: 100;
            padding-bottom: 20px;
        }

        .Lg_Main .Login h2 a {
            color: #02b1cb;
            font-size: 14px;
            float: right;
            text-decoration: none;
        }

        .Lg_Main .Login h3 {
            font-size: 14px;
            font-family: "微软雅黑";
            line-height: 35px;
            font-weight: 100;
            padding-top: 15px;
        }

        .Lg_Main .Login h3 a {
            color: #02b1cb;
            font-size: 14px;
            float: right;
            text-decoration: none;
        }

        .Lg_Main .Login h3 a.fl {
            float: left;
        }

        .Lg_Main .Login h3 a.fr {
            float: right;
        }

        .Lg_Main .Login h3.ck {
            font-size: 12px;
            height: 30px;
            color: #666;
            position: relative;
        }

        .Lg_Main .Login h3.ck label {
            position: absolute;
            right: 0px;
            top: 10px;
        }

        .Lg_Main .Login h3.ck input#ck {
            position: absolute;
            right: 140px;
            top: 23px;
            border: 1px solid red;
        }

        .Lg_Main .Login p input {
            width: 300px;
            height: 35px;
            border: 1px solid #ddd;
            text-indent: 10px;
            color: #ccc;
        }

        .Lg_Main .Login p input.tj {
            width: 300px;
            height: 45px;
            background: #ed145b;
            color: #fff;
            font-size: 16px;
            border-radius: 5px;
            text-align: center;
            line-height: 45px;
            margin-top: 20px;
            border: 0px;
        }
    </style>
</head>
<body>

<div class="Lg_Main">
    <div class="Login">

        <h2><a href="/login">登录</a>注册</h2>
        <span class="error-message" style="color: red;" th:text="${#httpServletRequest.getAttribute('loginMsg') == null ? '' : #httpServletRequest.getAttribute('loginMsg') }"></span>
        <form method="post" action="/user/reg" id="do_reg">
            <h3>用户名</h3>
            <p><input type="text" name="username" placeholder="用户名/邮箱/已验证手机"/></p>
            <h3>Email</h3>
            <p><input type="text" name="email" value=""/></p>
            <h3>密码</h3>
            <p><input type="password" name="password" value=""/></p>
            <p>密码强弱</p>
            <h3>确认密码</h3>
            <p><input type="password" name="passwordAgain" value=""/></p>
        </form>
        <p><input type="submit" class="tj" value="同意协议并注册"/></p>
        <h3><a href="Login.html" class="fl">我已有账号，我要登录</a><a href="" class="fr">您忘记密码了吗？</a></h3>


    </div>
</div>

</body>
<script src="/static/js/jquery.js"></script>
<script>
    $(function () {
        var btn = $('.tj')

        btn.click(function () {
            var username = $('input[name="username"]').val();
            var email = $('input[name="email"]').val();
            var password = $('input[name="password"]').val();
            var passwordAgain = $('input[name="passwordAgain"]').val();

            if (username === '' || email === '' || password === '' || passwordAgain === '') {
                alert("请输入完整的注册信息!");
                return;
            }

            if (password != passwordAgain) {
                alert("确认密码不一致！");
                return;
            }

            $('#do_reg').submit();


        })
    })
</script>
</html>
